<template>
  <div class="home">
    <van-nav-bar
      ref="navbar"
      left-text="useName"
      @click-right="onClickLeft"
      class="nav-bar">
      <template #left>
        <img class="leftIcon" src="../../assets/logo.png" />
      </template>
      <template #right>
        <van-icon name="contact" size="0.5rem" color="#1e9fff" />
        <span class="user">{{ useName }}</span>
      </template>
    </van-nav-bar>
    <div class="homeContent">
      <van-tabbar v-model="tabActive">
        <van-tabbar-item icon="home-o">检验</van-tabbar-item>
        <!-- <van-tabbar-item icon="notes-o">电子记录</van-tabbar-item> -->
        <van-tabbar-item icon="cluster-o">称重</van-tabbar-item>
        <!-- <van-tabbar-item icon="cluster-o">公用系统</van-tabbar-item> -->
      </van-tabbar>
      <van-grid :column-num="6">
        <van-grid-item
          v-for="item in filterArr"
          :key="item.name"
          :icon="item.icon"
          :text="item.title"
          @click="jumpToPage(item.name)" />
      </van-grid>
    </div>
    <van-popup v-model="showMessage" @click="showMessage = false">
      <div class="message-box">
        <van-icon name="cross" />
        <div class="message-title">消息提醒</div>
        <table border="1"  class="custom-table">
          <thead>
            <th>检品名称</th>
            <th>批号</th>
            <th>检验项目</th>
            <th>操作</th>
          </thead>
          <tbody>
          <tr v-for="(item,index) in messageList" :key="index">
            <td>{{item.MaterialName}}</td>
            <td>{{item.BatchID}}</td>
            <td>{{item.RecordName}}</td>
            <td><button class="action-btn" @click="toInspectionReview(item)">去处理</button></td>
          </tr>
          </tbody>
        </table>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { logout } from "@/api/user";
import {GetMyAuditRecordApprove} from "@/api/base";
import { getDomain, getLoginlogid, getToken, getUsername } from "@/utils/auth";
import {
  Cell,
  Popup,
  CellGroup,
  Dialog,
  Empty,
  Grid,
  GridItem,
  Icon,
  Loading,
  NavBar,
  Notify,
  Tabbar,
  TabbarItem,
  Tag,
} from "vant";
export default {
  name: "home",
  components: {
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [CellGroup.name]: CellGroup,
    [Tag.name]: Tag,
    [Empty.name]: Empty,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Notify.name]: Notify,
    [Loading.name]: Loading,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  data() {
    return {
      title: "检验",
      useName: "",
      showMessage: false,
      filterArr: [],
      messageList: [],
      checkRoles: [
        // {
        //   title: "加测申请",
        //   icon: "shop-collect-o",
        //   name: "applyAddTesting",
        //   urlPC: "Lims-SampleCheck-ApplynAddTesting",
        // },
        {
          title: "产品请验",
          icon: "records-o",
          name: "ApplyList",
          // urlPC: "Lims-SampleCheck-checkProcessMaterial",
        },
        // {
        //   title: "报告更新管理",
        //   icon: "shop-collect-o",
        //   name: "reportUpdate",
        //   urlPC: "Lims-SampleCheck-ReportUpdate",
        // },
        {
          title: "待我取样",
          icon: "shop-collect-o",
          name: "mySampling",
          urlPC: "Lims-SampleCheck-MySampling",
        },
        {
          title: "样品分样",
          icon: "exchange",
          name: "sampleSeparation",
          urlPC: "Lims-SampleCheck-SampleSeparation",
        },
        {
          title: "检验分配",
          icon: "shop-collect-o",
          name: "checkAssign",
          urlPC: "Lims-SampleCheck-checkAssign",
        },
        {
          title: "待我检验",
          icon: "todo-list-o",
          name: "myCheckObject",
          urlPC: "Lims-SampleCheck-myCheckObject",
        },
				{
          title: "微生物登记",
          icon: "todo-list-o",
          name: "microbialRegistration",
          urlPC: "Lims-SampleCheck-microbialRegistration",
        },
        {
          title: "检验校对",
          icon: "passed",
          name: "checkResultProof",
          urlPC: "Lims-SampleCheck-checkResultProof",
        },
        // {
        //   title: "检验复核",
        //   icon: "shop-collect-o",
        //   name: "inspectionReview",
        //   urlPC: "Lims-SampleCheck-InspectionReview",
        // },
        {
          title: "检验修改",
          icon: "shop-collect-o",
          name: "checkModify",
          urlPC: "Lims-SampleCheck-checkModify",
        },
        {
          title: "检验审批",
          icon: "coupon-o",
          name: "checkApprove",
          urlPC: "Lims-SampleCheck-CheckApprove",
        },
        {
          title: "记录复核",
          icon: "shop-collect-o",
          name: "inspectionReview",
          urlPC: "Lims-ElectronicRecords-recordReview",
        },
        {
          title: "电子记录查询",
          icon: "shop-collect-o",
          name: "recordQuery",
          urlPC: "Lims-ElectronicRecords-recordQuery",
        },
        {
          title: "公用系统待我检验",
          icon: "todo-list-o",
          name: "waterWaitForInspection",
          urlPC: "Lims-MicroBial-waterWaitForInspection",
        },
      ],
      // recordRoles: [
      //   {
      //     title: "检验记录",
      //     icon: "shop-collect-o",
      //     name: "configDetail",
      //   },
      // ],
      microBialRoles: [
        {
          title: "待我检验",
          icon: "shop-collect-o",
          name: "waterWaitForInspection",
          urlPC: "Lims-MicroBial-waterWaitForInspection",
        },
      ],
      weightRoles: [
        // {
        //  title: "称重项目添加",
        //  icon: "orders-o",
        //  name: "weightItemList",
        // },
        {
          title: "项目称重",
          icon: "points",
          name: "weightItem",
        },
      ],
      logouting: false,
      token: "",
      gDomain: "",
      loginlogid: "",
      tabActive: "",
    };
  },
  watch: {
    tabActive(val) {
      if (val == 0) {
        // this.recursiveRoutes(getRoles(), this.checkRoles);
        this.showNavList("check", this.checkRoles);
      }
      //  else if (val == 1) {
      //   this.showNavList("record", this.recordRoles);
      // }
      else if (val == 1) {
        this.showNavList("weight", this.weightRoles);
      } else if (val == 2) {
        this.showNavList("micro", this.microBialRoles);
      }
    },
  },
  mounted() {
    this.gDomain = getDomain("domainKey");
    this.token = getToken("tokenKey");
    this.loginlogid = getLoginlogid("loginlogidKey");
    this.useName = getUsername("usernameKey");
    this.tabActive = 0;
    if(localStorage.getItem("showMessage")) return
    GetMyAuditRecordApprove({Token: this.token}).then((res) => {
      console.log('res',res)
      if(res.ErrorCode == 0){
        if(res.Result.length > 0){
          this.showMessage = true;
          localStorage.setItem("showMessage",1);
          this.messageList = res.Result||[];
        }
      }
    });
  },
  methods: {
    onClickLeft() {
      Dialog.confirm({
        title: "注销提示",
        message: "确认退出登录吗？",
      })
        .then(() => {
          this.logout();
        })
        .catch(() => {});
    },
    toInspectionReview(item){
      this.$router.push({
        name: "inspectionReview",
      });
    },
    logout() {
      var that = this;
      this.logouting = true;
      var param = {
        Token: this.token,
        loginlogid: this.loginlogid,
      };
      logout(param)
        .then((response) => {
          if (response.ErrorCode == 0) {
            localStorage.removeItem("tokenKey");
            localStorage.removeItem("loginlogidKey");
            localStorage.removeItem("token");
            localStorage.removeItem("roles");
            that.$router.push({
              name: "login",
            });
          }
        })
        .catch(() => {});
    },
    recursiveRoutes(rolesData, routesTipsData) {
      var _this = this;
      for (let i = 0, l = rolesData.length; i < l; i++) {
        let item = rolesData[i];
        let { children, hash } = item;
        routesTipsData.map((item) => {
          if (item.urlPC === hash) {
            item.visible = true;
          }
        });
        if (Array.isArray(children) && children.length) {
          _this.recursiveRoutes(children, routesTipsData);
        }
      }
    },
    showNavList(val, arr) {
      this.filterArr = [];
      if (val) {
        arr.map((item) => {
          this.filterArr.push(item);
          // if (val == "weight" || val == "record") {
          //   this.filterArr.push(item);
          // } else {

          // }
        });
      }
    },
    jumpToPage(val) {
      this.$router.push({
        name: val,
      });
    },
  },
};
</script>
<style>
.van-cell-group__title {
  text-align: left !important;
}
</style>
<style scoped lang="less">
.home {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
  background: #efefef;
}
.homeContent {
  height: calc(100% - 1rem);
  position: relative;
  /deep/.van-tabbar--fixed {
    position: absolute;
    width: 1.5rem;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
  }
  /deep/.van-grid {
    height: 100%;
    width: calc(100% - 1.5rem);
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 0 !important;
    padding: 0.3rem 5% !important;
    box-sizing: border-box;
    overflow-y: auto;
    display: block !important;
  }
}
/deep/.van-tabbar-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #fff;
  color: #1e9fff;
}
/deep/.van-tabbar-item:nth-child(2) {
  top: 20%;
}
/deep/.van-tabbar-item:nth-child(3) {
  top: 40%;
}
.nav-bar {
  background-color: #fff !important;
}
.leftIcon {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.1rem;
}
.user {
  margin-left: 0.15rem;
  font-size: 0.36rem;
  color: #1e9fff;
}
.van-hairline--bottom::after {
  border: none;
}
/deep/.van-tabbar-item--active {
  background: #1e9fff;
  color: #fff;
  border-radius: 0 0.1rem 0.1rem 0;
}
/deep/.van-grid-item {
  // flex-basis: 12%!important;
  width: 12% !important;
  height: 2rem !important;
  padding-right: 0 !important;
  float: left;
  margin: 4%;
}
/deep/.van-grid-item__content {
  border-radius: 0.2rem;
}
/deep/.van-grid-item__text {
  font-size: 0.24rem;
}
/deep/ .van-popup--center{
  border-radius: .1rem;
  
}

.message-box{
  min-height: 30vh;
    .van-icon{
  font-size: .4rem;
  position: absolute;
  right: .2rem;
  top: .2rem;
}
}
.message-title{
  padding: .2rem;
  font-size: .3rem;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  // margin-bottom: .2rem;
  font-size: .25rem;
  min-width: 60vw;

}

.custom-table th,
.custom-table td {
  padding: .1rem .3rem;
  border: 1px solid #ddd;
  text-align: center;
}

.custom-table th {
  background-color: #f4f4f4;
  color: #333;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.custom-table tr:hover {
  background-color: #f1f1f1;
}
.custom-table tbody {
  max-height: 60vh; /* 设置最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
  overflow-x: hidden; /* 添加垂直滚动条 */
  display: block; /* 使 tbody 成为块级元素 */
}
.custom-table tbody::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
.custom-table thead,
.custom-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 固定表头和内容的宽度 */
}
.action-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: .1rem .2rem;
  cursor: pointer;
  border-radius: 3px;
}

.action-btn:hover {
  background-color: #0056b3;
}

</style>
